<template>
  <div class="main-container">
    <div class="flex">
      <div class="main-left flex-1">
        <div class="post-box" v-for="(item, index) in posts" :key="index">
          <div class="post-top mb-2"  @click="handleOpenPost(item)">
            <el-image
              class="top-img"
              :src="item.articleInfor.thumbnail" lazy></el-image>
            <div class="position-absolute post-title">
              {{item.title.rendered}}
            </div>
          </div>
        </div>
      </div>
      <div class="main-right">
        <RightIndex></RightIndex>
      </div>
    </div>
  </div>
</template>

<script>
  import {getPostList} from "@/api/post";
  import RightIndex from "@/components/RightIndex";
  import {mapState} from 'vuex'

  export default {
    head () {
      return {
        title: `${this.info.blogName} | ${this.info.blogDescription}`,
        meta: [
          { name: 'keywords', content: this.info.keywords },
          { name: 'description', content: this.info.description }
        ]
      }
    },
    async asyncData({ app, params, error, store }) {
      const res = await app.$axios.$request(getPostList({
        page: 1,
        per_page: 10
      }))
      return {
        posts: res
      }
    },
    computed: {
      ...mapState(['info'])
    },
    components: {
      RightIndex
    },
    mounted() {
      // this.$store.dispatch('nuxtServerInit')
    },
    methods: {
      handleOpenPost(item) {
        this.$router.push({path: `/post/${item.id}`})
      }
    }
  }
</script>
<style scoped lang="scss">
</style>
